<template>
  <view class="loading ms-loading" v-if="loading">
    <view class="spinner">
      <view
        class="spinner-view rect1"
        :style="{ 'background-color': color }"
      ></view>
      <view
        class="spinner-view rect2"
        :style="{ 'background-color': color }"
      ></view>
      <view
        class="spinner-view rect3"
        :style="{ 'background-color': color }"
      ></view>
      <view
        class="spinner-view rect4"
        :style="{ 'background-color': color }"
      ></view>
      <view
        class="spinner-view rect5"
        :style="{ 'background-color': color }"
      ></view>
    </view>
  </view>
</template>

<script>
export default {
  name: "custom-loading",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: "",
    },
  },
  watch: {
    show(val) {
      this.loading = val;
    },
  },
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    open() {
      this.loading = true;
    },
    close() {
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.loading {
  margin: 24rpx 0;
  //loading动画
  display: flex;
  justify-content: center;
  @keyframes stretchdelay {
    0%,
    40%,
    100% {
      transform: scaleY(0.6);
    }
    20% {
      transform: scaleY(1);
    }
  }
  .spinner {
    margin: 20upx 0;
    width: 60upx;
    // height: 70upx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .spinner-view {
      background-color: #45daee;
      height: 50upx;
      width: 6upx;
      border-radius: 6upx;
      animation: stretchdelay 1.2s infinite ease-in-out;
    }
    .rect2 {
      animation-delay: -1.1s;
    }
    .rect3 {
      animation-delay: -1s;
    }
    .rect4 {
      animation-delay: -0.9s;
    }
    .rect5 {
      animation-delay: -0.8s;
    }
  }
}
.ms-loading {
  .spinner {
    margin: 0;
  }
}
</style>
